<template>
    <div>
        <div class="activity-right">
            <h3>活动用户列表</h3>
            <el-input style="width:400px;" class='input' @keyup.enter.native="search" prefix-icon="el-icon-search" clearable v-model="name"  placeholder="请输入查询信息"></el-input>
            <el-button type="primary" @click.enter="search" icon="el-icon-search">搜索</el-button>
            <el-table class="table-common" :data="data" element-loading-text="拼命加载中" style="width: 100%; margin-top:20px;">
                <el-table-column prop="headImage" label="用户头像" width="120" >
                    <template slot-scope="scope">
                        <img :src="scope.row.headImage" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="nickName" label="用户昵称" width="120">
                </el-table-column>
                <el-table-column prop="roleName" label="用户身份" width="100">
                </el-table-column>
                <el-table-column prop="verifyPhone" label="用户手机" width="100">
                </el-table-column>
                
                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editCustomer(scope.row.wxUid)" size="small">查看直属会员</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <section class="pagination" >
                <el-pagination background layout="total,prev, pager, next,jumper" :page-count="Math.ceil(total/10)" :total="total" :page-size="10" :current-page.sync="page" @current-change="handlePageChange">
                </el-pagination>
            </section>
          
        </div>
    </div>
</template>

<script>
import { getUnCommonUserList } from "../../data/postData";
export default {
    mounted() {
        let { page, name } = this.$store.state.activityCustomer;
        this.name = name
        this.getCustomerList(this.page)
    },
    data() {    
        return {
            user: JSON.parse(sessionStorage.getItem("ddaigoUser")),
            data: null,
            total: null,
            size: 10,
            page: this.$store.state.activityCustomer.page,
            name: "",
        };
    },
    methods: {
        //获取客户端用户列表
        getCustomerList(page) {
            var params = {
                data: {
                    page: page,
                    size: 10,
                    name: this.name,
                }
            };
            this.$fetch.post(getUnCommonUserList, params).then(res => {
                this.data = res.data;
                this.total = res.total;
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: "warning",
                    duration: 1000
                });
            });
        },
        search(){
            this.page = 1
            this.$store.dispatch("saveActivityCustomerName", this.name);
            this.getCustomerList(this.page)
        },
        handlePageChange(val) {
            this.page = val;
            this.getCustomerList(this.page);
            this.$store.dispatch("saveActivityCustomerPage", this.page);
        },
        editCustomer(id){
            this.$router.push({path:'/checkCustomer/'+ id})
            this.$store.dispatch("saveActivityCustomerName", this.name);
        },
    }
};
</script>

<style scoped lang="less">
.activity-right {
    width: calc(~"100% - 250px");
    margin-top: 66px;
    margin-left: 230px;
    float: left;
    h3 {
        margin: 20px 0;
    }
    .select_type {
        margin-bottom: 20px;
        position: relative;
        span {
            margin-right: 10px;
        }
        button {
            position: absolute;
            right: 0;
            top: 0;
        }
    }
}
.el-table__body-wrapper {
    margin-top: 15px;
    img {
        width: 30%;
    }
    a {
        color: #409eff;
    }

}
.right {
    float: right;
    z-index: 999999999;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
</style>